<template>
  <div >
    <n-carousel  show-arrow autoplay>
      <img style="height: 350px"
          class="carousel-img"
          src="@/assets/img/lun/109951169165630851.jpg"
      >
      <img style="height: 350px"
          class="carousel-img"
          src="@/assets/img/lun/109951169165643239.jpg"
      >
      <img style="height: 350px"
          class="carousel-img"
          src="@/assets/img/lun/109951169165670717.jpg"
      >
      <img style="height: 350px"
          class="carousel-img"
          src="@/assets/img/lun/109951169165631153.jpg"
      >
    </n-carousel>
    <n-layout style="margin-top: 20px;border-radius: 10px;border: 1px solid rgb(239, 239, 245);" >
      <n-layout  has-sider sider-placement="right">
        <n-layout-content content-style="padding: 24px;">
          <n-thing class="tab_thing">
            <template #avatar>
                <SIcon :size="30" icon="icon-yinle4"/>
            </template>
            <template  #header>
              热门歌单
            </template>
          </n-thing>
          <n-grid x-gap="50" :cols="4" item-style="margin-top: 30px">
            <n-gi v-for="item of songList"  style="cursor: pointer;"  @click="gotoSongListInfo(item)">
              <n-image
                  preview-disabled
                  :width="140"
                  :hidden="140"
                  :src="item.picUrl"
                  fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
              />
              <n-thing description-style="color: #B2B2B2;font-size: 12px"
                       :description="item.createUserVo?.name">
                <template  #header>
                  <n-ellipsis style="max-width: 140px">
                    {{item.name}}
                  </n-ellipsis>
                </template>
              </n-thing>
            </n-gi>
          </n-grid>
          <n-thing class="tab_thing no_one">
            <template #avatar>
                <SIcon :size="30" icon="icon-yinle4"/>
            </template>
            <template  #header>
              分类榜单
            </template>
          </n-thing>
          <n-grid x-gap="50" :cols="2" item-style="margin-top: 30px">
            <n-gi >
              <n-list bordered clickable hoverable>
                <template #header>
                  <h2 class="sidebar">热门歌曲</h2>
                </template>
                <n-list-item style="height: 32px" v-for="(item,index ) of hotMusic" @click="musicClick(item)">
                  <template #prefix>
                    {{index + 1}}
                  </template>
                  {{ item.musicName }}
                  <template #suffix>
                    <n-avatar
                        round
                        :size="20"
                        :src="item.picUrl || '/src/assets/img/109951163833244126.jpg'"
                    />
                  </template>
                </n-list-item>
              </n-list>
            </n-gi>
            <n-gi >
              <n-list bordered clickable hoverable>
                <template #header>
                  <h2 class="sidebar">热门歌手</h2>
                </template>
                <n-list-item style="height: 32px" v-for="(item,index ) of hotSinger"  @click="gotoSingerInfo(item)">
                  <template #prefix>
                    {{index + 1}}
                  </template>
                  {{ item.name }}
                  <template #suffix>
                    <n-avatar
                        round
                        :size="20"
                        :src="item.picFileVo?.url || '/src/assets/img/109951163833244126.jpg'"
                    />
                  </template>
                </n-list-item>
              </n-list>
            </n-gi>
          </n-grid>
        </n-layout-content>
        <n-layout-sider
            :width="240"
            bordered
        >
          <n-list clickable hoverable>
            <template #header>
              <h2 class="sidebar">最新单曲</h2>
            </template>
            <n-list-item v-for="item of musicList" @click="musicClick(item)" @contextmenu="(e)=>handleMusicMenu(e,item)">
              <template #prefix>
                <n-avatar
                    round
                    :size="48"
                    :src="item.picUrl || '/src/assets/img/109951163833244126.jpg'"
                />
              </template>
              <n-thing description-style="color: #B2B2B2;font-size: 12px"
                       :title="item.musicName"
                       :description="getDesc(item)">
              </n-thing>
            </n-list-item>
          </n-list>
          <n-list clickable hoverable>
            <template #header>
              <h2 class="sidebar">今日推荐</h2>
            </template>
            <n-list-item v-for="item of todayMusic" @click="musicClick(item)"  @contextmenu="(e)=>handleMusicMenu(e,item)">
              <template #prefix>
                <n-avatar
                    round
                    :size="48"
                    :src="item.picUrl || '/src/assets/img/109951163833244126.jpg'"
                />
              </template>
              <n-thing description-style="color: #B2B2B2;font-size: 12px"
                       :title="item.musicName"
                       :description="getDesc(item)">
              </n-thing>
            </n-list-item>
          </n-list>
        </n-layout-sider>
      </n-layout>

    </n-layout>

  </div>

</template>
<script setup>

import SIcon from "@/components/public/SIcon.vue";
import {queryMusicList} from "@/api/music/musicApi";
import {storeToRefs} from "pinia";
import useMusicStore from "@/stores/admin/useMusicStore";
import {querySongList} from "@/api/music/songListApi";
import {queryHotSingerList} from "@/api/music/singerApi";

const props = defineProps({
  handleMusicMenu:Function
})
const musicList = ref([
])
// 歌单列表
const songList = ref([

])
const getDesc = (item)=>{
  return item?.singerVo?.name + ' / ' + item.playNum + '次播放'
}
const todayMusic = ref([

])
const hotMusic = ref([])
const hotSinger = ref([])
onMounted(()=>{
  getNewMusic();
  getTodayMusic()
  getHotSongList()
  getHotMusic()
  getHotSinger()
})
function getNewMusic(){
  queryMusicList(1,6,{sortType:'creatTimeDesc'}).then(res=>{
    musicList.value = res.data?.records || []
  })
}
function getTodayMusic(){
  queryMusicList(1,6,{sortType:'day'}).then(res=>{
    todayMusic.value = res.data?.records || []
  })
}
function getHotMusic(){
  queryMusicList(1,10,{sortType:'hot'}).then(res=>{
    hotMusic.value = res.data?.records || []
  })
}
function getHotSinger(){
  queryHotSingerList(1,10,{}).then(res=>{
    hotSinger.value = res.data?.records || []
  })
}
function getHotSongList(){
  querySongList(1,8,{sortType:'hot'}).then(res=>{
    songList.value = res.data?.records || []
  })
}

function musicClick(music){
  useMusicStore().playMusic(music);
}
const router = useRouter();
const gotoSongListInfo = (item)=>{
  router.push({
    path:`/songList/${item.id}`
  })
}
const gotoSingerInfo = (item)=>{
  router.push({
    path:`/singer/${item.id}`
  })
}
</script>
<style>
.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.n-list__header{
  background-color: #fafafc;
  .sidebar{
  }
}
.tab_thing{
  border-bottom: 2px solid #C10D0C;
  &.no_one{
    padding-top: 40px;
  }
}
</style>
